// src/pages/search/widgets/searchKey/item/index.tsx
import React from "react";
import GeekIcon from "@shared/geekIcon";
import { SearchKey } from "@slice/searchKey";
import { useNavigate } from "react-router-dom";
import { removeKey } from "@slice/searchKey";
import { useTypedDispatch } from "@store/index";
interface Props {
  searchKey: SearchKey;
}
export default function SearchKeyItem({ searchKey }: Props) {
  const navigate = useNavigate();
  // 获取 dispatch 方法
  const dispatch = useTypedDispatch();
  return (
    <li 
    onClick={() => {
      navigate(`/result/${searchKey.name}`);
    }}
  >
    {searchKey.name} <GeekIcon onClick={() => dispatch(removeKey({ id: searchKey.id }))} type={"iconbtn_essay_close"} />
  </li>
  );
}